import { BUS_THEME } from '@/apis/bus';
import Title from '@/assets/choise-1.png';
import Card2 from '@/assets/choise-2.png';
import Card1 from '@/assets/choise-3.png';
import Bg from '@/assets/choise-bg.jpg';

import '@animxyz/core';
import { XyzTransitionGroup } from '@animxyz/react';
import { history } from 'umi';

export default function Page() {
  async function handleStart(theme: BUS_THEME) {
    sessionStorage.setItem('theme', `${theme}`);
    history.push(`/ready`);
  }

  return (
    <>
      <XyzTransitionGroup
        appear
        appearVisible
        xyz="fade up-2 appear-stagger"
        style={{
          backgroundImage: `url(${Bg})`,
        }}
        className=" min-h-screen relative overflow-hidden bg-cover bg-center flex flex-col items-center pt-[120px]"
      >
        {/* title */}
        <h1
          className=" w-[612px] h-[316px] bg-cover"
          style={{
            backgroundImage: `url(${Title})`,
          }}
        />

        {/* cards */}
        <div
          onClick={() => handleStart(BUS_THEME.ZHUDI)}
          className="w-[526px] h-[348px] bg-cover mt-4 active:translate-y-2 active:scale-95 transition-all"
          style={{ backgroundImage: `url(${Card1})` }}
        ></div>
        <div
          onClick={() => handleStart(BUS_THEME.NIKE)}
          className="w-[620px] h-[384px] bg-cover mt-3 active:translate-y-2 active:scale-95 transition-all relative -left-[44px]"
          style={{ backgroundImage: `url(${Card2})` }}
        ></div>
      </XyzTransitionGroup>
    </>
  );
}
